<template>
  <div>

    <!-- 数据配置资源页面 -->
   <van-row>

       <van-col span="24"><heardes/></van-col>
       <van-col span="4"> <left/> </van-col>

       <van-col span="20">
            <table>

                <tr v-for="(i,index) in list" :key=i.index>
                    <td>
                        <van-field :label="i.label" placeholder="请输入" v-model="names[index]"/>
                    </td>
                    <td>
                        <select v-model="typevalues[index]">

                            <option value="input">输入框</option>
                            <option value="radio">单选框</option>
                            <option value="checkbox">复选框</option>
                            <option value="select">下拉框</option>
                            <option value="datetime">日期</option>
                            <option value="file">文件</option>

                        </select>

                    </td>
                    <td>
                        <van-field label="值" placeholder="请输入值" v-model="values[index]"></van-field>
                        <van-button @click='getsource(index)'>选择数据源</van-button>
                    </td>
                </tr>

            </table>
            <van-button @click="add"> + </van-button>
            <van-button @click="submit">提交</van-button>

             <el-dialog v-model="dialogTableVisible" title="数据源选择">
          <div>
            <van-row>
              <van-col span="12">
                <select v-model="selectid" @change="selectdata">
                  <option :value="i.id" v-for="i in tableData" :key="i.id"> {{i.name}}</option>
                </select>
              </van-col>
              <van-col span="12">
                <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                    @current-change="handleCurrentChange"
                >
                  <el-table-column type="index" width="50" />

                  <el-table-column property="name" label="Name" width="120" />

                </el-table>
              </van-col>
            </van-row>
          </div>


        </el-dialog>

       </van-col>


   </van-row>

  </div>

</template>

<script>
import axios from '../../http/axios'
import Heardes from './heardes.vue'
import left from './left.vue'
export default {
  components: { left,Heardes },
  data(){
      return{
        list:[{'label':'名称'}],
        names:{},
        typevalues:{},
        values:{},
        dialogTableVisible:false,
        gridData:[{'id':1,'name':'请假类型数据源'},{'id':2,'name':'会议地址数据源'}],
        tableData: [],
        id:this.$route.query.id,
        selectid:'',

      }
  },
  methods: {
    selectdata(){
        for(var i=0;i<this.sourcelist.length;i++){
            if(this.selectid==this.sourcelist[i]["id"]){
            this.tableData=this.sourcelist[i]["mes"]
        }}
        },
        add(){
            this.list.push({'label':'名称'})
        },
        // 提交
        submit(){
            //获取输入的所有值
            let tlist=[]
            for(var i=0;i<this.list.length;i++){
                let dict = {'lable':this.names[i],'type':this.typevalues[i],'values':this.values[i]}
                tlist.push(dict)
            }
            console.log(this.typevalues);
            console.log(tlist);
        },
        //添加数据源
        getsource(index){
            localStorage.setItem('index',index)
            axios('getresourcedata','get').then(res=>{
                this.tableData = res.list
            })
            this.dialogTableVisible=true
        },
       
    handleCurrentChange(val) {
        this.dialogTableVisible=false
        let index = localStorage.getItem('index')
        this.values[index] = JSON.stringify(val['mes'])
        
    },
    },


}
</script>

<style>

</style>
